<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="${ctx}/resources/vue-element-lib/index.css">
<style>
    .x-width-100 {
        width: 100%;
    }
    .x-width-default {
        width: auto;
    }
</style>
<body>
<script src="${ctx}/resources/vue-element-lib/vue.js"></script>
<script src="${ctx}/resources/vue-element-lib/index.js"></script>
<script>
    /*select*/
    Vue.component('x-select', {
        props: {
            // 下拉框
            options: {
                type: Array,
                default: () => [{
                    value: '1',
                    label: '选项1'
                }, {
                    value: '2',
                    label: '选项2'
                }, {
                    value: '3',
                    label: '选项3'
                }, {
                    value: '4',
                    label: '选项4'
                }, {
                    value: '5',
                    label: '选项5'
                }]
            },
            // 用于v-model的值
            value: {
                type: [String, Object, Number],
                default: ''
            },
            // 用于placeholder
            name: {
                type: String,
                default: ''
            },
            // 是否宽度为100%,用于表单中
            full: {
                type: Boolean,
                default: true
            }
        },
        template: `
        <el-select
            v-bind="$attrs"
            v-on="$listeners"
            :placeholder="'请选择'+name"
            :value="value"
            clearable
            filterable
            :class="full ? 'x-width-100' :'x-width-default'"
            size='small'
            @input="$emit('change', $event)"
          >
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>`
            })
    /*input*/
    Vue.component('x-input',{
    props: {
        // 用于placeholder
        name: {
            type: String,
            default: () => ''
        },
        // 是否宽度为100%,用于表单中
        full: {
            type: Boolean,
            default: true
        }
    },
    template:`
    <el-input
        :placeholder="'请输入'+name"
        :class="full ? 'x-width-100' :'x-width-default'"
        size="small"
        v-bind="$attrs"
        v-on="$listeners"
      />`
    })
    /*col*/
    Vue.component('x-col',{
    props: {
        position: {
            type: String,
            default: () => 'left'
        }
    },
    computed: {
        mySpan: function() {
          switch (this.position) {
              case 'left': return 9
              case 'right': return 9
              case 'full': return 19
          }
        },
        myOffset: function () {
            switch (this.position) {
                case 'left': return 2
                case 'right': return 1
                case 'full': return 2
            }
        }
    },
    template:`
     <el-col v-bind="$attrs" :span="mySpan" :offset="myOffset">
            <slot />
     </el-col>
    `
    })

</script>
</body>
</html>

